<template>
	<view class="content">
		<view class="input-container" style="margin-top: 30rpx;">
			<view class="title">商户资料</view>
			<view class="uni-row input-item">
				<view class="input-name">
					店铺名称
				</view>
				<view class="input">
					<input type="text" placeholder="请填写营业执照上的真实名称" v-model="company_name" placeholder-style="font-size:28rpx;color:#999999"/>
				</view>
			</view>
			<view class="uni-row input-item">
				<view class="input-name">
					联系人
				</view>
				<view class="input">
					<input type="text" placeholder="请填写联系人" v-model="linkman" placeholder-style="font-size:28rpx;color:#999999"/>
				</view>
			</view>
			
			<view class="uni-row input-item">
				<view class="input-name">
					手机号
				</view>
				<view class="input">
					<input type="text" placeholder="填写手机号" v-model="phone" placeholder-style="font-size:28rpx;color:#999999"/>
				</view>
			</view>
			<view class="uni-row input-item input-relact" @tap="address_show_action()">
				<view class="input-name">
					所在地区
				</view>
				<view class="input">
					<input type="text" placeholder="请选择店铺所在地区" placeholder-style="font-size:28rpx;color:#999999" v-model="diqu" disabled="true"/>
				</view>
				<image src="../../static/images/heijiao.png" class="xuanze-sj"></image>
			</view>
			<view class="uni-row input-item">
				<view class="input-name">
					地址
				</view>
				<view class="input">
					<input type="text" placeholder="填写店铺地址" v-model="addressinfo" placeholder-style="font-size:28rpx;color:#999999"/>
				</view>
			</view>
		</view>
		<button class="big-btn" style="position: fixed;left:115rpx;bottom: 98rpx;" @tap="tijiaofuqu()" >{{btn_text}}</button>
		<!-- 地址弹出框 -->
		<view v-show="address_show">
			<view class="mark"></view>
			<view class="address-container">
				<view class="address-title border-bottom" >
					<text v-if="choose_address.province">{{choose_address.province}}——</text><text v-if="choose_address.city">{{choose_address.city}}——</text><text v-if="choose_address.town">{{choose_address.town}}</text>
					<image src="../../static/images/pay-close.png" style="float: right;width: 32rpx;height: 32rpx;" @tap="close_address()"></image>
				</view>
				<view class="uni-row">
					<view class="address-item" style="border-right: 1px solid #F2F2F2;">
						<scroll-view scroll-y="true" class="scroll-view">
							<view>
								<view class="city-name " v-for="(item,index) in provinces" :key="index" @tap="xuanzedizhi" :data-id="item.id" :data-index="index">
									<image :src="item.img"></image>
									{{item.name}}
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="address-item" style="padding-left: 32rpx;box-sizing: border-box;border-right: 1px solid #F2F2F2;">
						<scroll-view scroll-y="true" class="scroll-view">
							<view>
								<view class="city-name " v-for="(item,index) in citys" @tap="xuanzecity" :data-id="item.id" :data-name="item.name">
									<image :src="item.img"></image>
									{{item.name}}
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="address-item" style="padding-left: 32rpx;box-sizing: border-box;">
						<scroll-view scroll-y="true" class="scroll-view">
							<view>
								<view class="city-name " v-for="(item,index) in townlist" @tap="xuanzetown" :data-id="item.id" :data-name="item.name">
									<image :src="item.img"></image>
									{{item.name}}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>	
	    </view>
	</view>
</template>

<script>
	import {getlogin} from "@/static/js/login.js";
	import httpPath from '@/static/js/path.js';
	export default {
			data() {
				return {
					address_show:false,
					amapPlugin: null,
					provinces:[],
					citys:[],
					choosedprovinces:"",
					key: '127a8a73b4bb644c0893d7a4d14b246a',
					region:{},
					choosedcity:"",
					choose_address:{},
					townlist:[],
					provincesindex:0,
					cityindex:0,
					diqu:"",
					company_name:"",
					linkman:"",
					phone:"",
					wxinfo_id:"",
					addressinfo:"",
					btn_text:"申请上门服务",
					title:"商户申请",
					userinfo:{},
				}
			},
			onShow() {
				
			},
			onLoad() {
			    this.userinfo = getlogin()
			    this.wxinfo_id = this.userinfo.wxinfo_id;
				this.getinfo();
			},
			methods: {
				getinfo(){
					console.log("this.wxinfo_id"+ this.wxinfo_id)
					uni.request({
						url: httpPath.filePath+'/index/apply/index',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {
							user_id:this.wxinfo_id 
						},
						success: (res) => {
						    if(res.data.code==200){
								if(res.data.data){
									this.company_name=res.data.data.company_name;
									this.linkman=res.data.data.linkman;
									this.phone=res.data.data.phone;
									this.addressinfo=res.data.data.address;
									this.choose_address.provinceid=res.data.data.province_id;
									this.choose_address.province=res.data.data.province_name.name;
									this.choose_address.cityid=res.data.data.city_id;
									this.choose_address.city=res.data.data.city_name.name;
									this.choose_address.townid=res.data.data.county_id;
									this.choose_address.town=res.data.data.county_name.name;
								    this.diqu=this.choose_address.province+this.choose_address.city+this.choose_address.town;
									this.title="修改商户申请";
									this.btn_text="确认修改";
									uni.setNavigationBarTitle({
									    title: this.title
									});
								}
							}
							
						}
									
					});
				},
				/**
				 * 确认上门服务
				 */
				tijiaofuqu(){
					
					let $phone=/^1(3|4|5|6|7|8|9)\d{9}$/;
					if(this.company_name==""||this.company_name==null){
						uni.showModal({
							showCancel:false,
							content:"请填写营业执照上的真实名称"
						})
						return false;
					}
					if(this.linkman==""||this.linkman==null){
						uni.showModal({
							showCancel:false,
							content:"请填写联系人"
						})
						return false;
					}
					if(this.phone==""||this.phone==null){
						uni.showModal({
							showCancel:false,
							content:"请填写手机号"
						})
						return false;
					}
					
					if(!$phone.test(this.phone)){
						uni.showModal({
							showCancel:false,
							content:"请填写正确的手机号"
						})
						return false;
					}
					if(!this.choose_address.provinceid){
						uni.showModal({
							showCancel:false,
							content:"请选择区域"
						})
						return false;
					}else if(!this.choose_address.cityid){
						uni.showModal({
							showCancel:false,
							content:"请选择区域"
						})
						return false;
					}else if(!this.choose_address.townid){
						uni.showModal({
							showCancel:false,
							content:"请选择区域"
						})
						return false;
					}
					if(this.addressinfo==""||this.addressinfo==null){
						uni.showModal({
							showCancel:false,
							content:"请填写详细地址"
						})
						return false;
					}
					uni.request({
						url: httpPath.filePath+'/index/apply/publish',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {
							wxinfo_id:this.wxinfo_id,
							company_name:this.company_name,
							linkman:this.linkman,
							phone:this.phone,
							province_id:this.choose_address.provinceid,
							city_id:this.choose_address.cityid,
							county_id:this.choose_address.townid,
							address:this.addressinfo
							
						},
						success: (res) => {
						    if(res.data.code==200){
								uni.showModal({
									showCancel:false,
									content:"提交成功"
								})
								this.getinfo()
							}else{
								uni.showModal({
									content:res.data.msg
								})
							}
							
						}
									
					});
					
				},
				/**
				 * 获得地区
				 */
				getaddress(){
					uni.request({
						url: httpPath.filePath+'/index/regoin/index',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {},
						success: (res) => {
						   uni.setStorage({
							   key: 'address',
							   data: res.data.data.region,
							   success: function () {
								  
							   }
						   });
							
						}
				
					});
				},close_address(){
					this.address_show=false;
				},address_show_action(){
				let $this=this;
				$this.provinces=[];
				const address = uni.getStorageSync('address');
				if(!address){
					this.getaddress();
				}
				uni.getStorage({
				    key: 'address',
				    success: function (res) {
						$this.region=res.data;
						for (let i=0;i<res.data.length;i++ ) {
							$this.provinces.push({name:res.data[i].name,id:res.data[i].id,checked:0,img:"../../static/images/weixuanzhong.png"})
						}
					}
				})
				this.address_show=true;
			},/**
			 *选择省
			 */
			xuanzedizhi(e){
				
				let $this=this;
				this.citys=[];
				let id= e.currentTarget.dataset.id;
				let index= e.currentTarget.dataset.index;
				for (let i=0;i<$this.region.length;i++ ) {
					if($this.region[i].id==id){
						$this.provincesindex=i;
						$this.provinces[i].img="../../static/images/xuanzhong.png"
						$this.provinces[i].check=1;
						// $this.choosedprovinces = $this.provinces[i].name;
						$this.choose_address.province = $this.provinces[i].name;
						$this.choose_address.provinceid = $this.provinces[i].id;
						for (let j=0;j<$this.region[i].city.length;j++ ) {
							$this.citys.push({name:$this.region[i].city[j].name,id:$this.region[i].city[j].id,checked:0,img:"../../static/images/weixuanzhong.png"})
						}
						
					}else{
						$this.provinces[i].img="../../static/images/weixuanzhong.png"
						$this.provinces[i].check=0;
					}
				}
				
			},/**
			 * 选择市
			 */
			xuanzecity(e){
				let $this=this;
				this.choose_address.cityid= e.currentTarget.dataset.id;
				this.choose_address.city= e.currentTarget.dataset.name;
				let citylist=this.region[this.provincesindex].city;
				
                for (let j=0;j<citylist.length;j++ ) {
                	if(citylist[j].id==this.choose_address.cityid){
						this.cityindex=j;
						$this.citys[j].img="../../static/images/xuanzhong.png"
						$this.citys[j].check=1;
						let townlist= citylist[j].county;
					    console.log(townlist)
						this.townlist=[];
						for (let a = 0; a <townlist.length; a++) {
							
							this.townlist.push({name:townlist[a].name,id:townlist[a].id,checked:0,img:"../../static/images/weixuanzhong.png"})
						}
						
					}else{
						$this.citys[j].img="../../static/images/weixuanzhong.png"
						$this.citys[j].check=0;
					}
                }
			},/**
			 * 选择区县
			 */
			xuanzetown(e){
				let $this=this;
				this.choose_address.townid= e.currentTarget.dataset.id;
				this.choose_address.town= e.currentTarget.dataset.name;
				let townslist=this.region[this.provincesindex].city[this.cityindex];
				
				for (let j=0;j<townslist.length;j++ ) {
					if(townslist[j].id==this.choose_address.townid){
						this.cityindex=j;
						$this.townlist[j].img="../../static/images/xuanzhong.png"
						$this.townlist[j].check=1;
					}else{
						$this.townlist[j].img="../../static/images/weixuanzhong.png"
						$this.townlist[j].check=0;
					}
				}
				this.diqu=this.choose_address.province+this.choose_address.city+this.choose_address.town;
				this.address_show=false;
			},
			}
		}
</script>

<style>
	page{background: #f9f9f9;}
	.address-title{font-size: 32rpx;font-weight: bold;color: #7ADBA8;text-align: center;padding-bottom: 20rpx;}
	.scroll-view{height: 100%;}
	.city-name{height: 90rpx;line-height: 90rpx;font-size: 28rpx;color: #666;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
	.city-name image{width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 20rpx;}
	.address-container{z-index:100000;position: fixed;bottom: 0rpx;left: 0px;background: #fff;height: 662rpx;padding: 32rpx;box-sizing: border-box;width: 100%;}
	.address-item{width: 33.3%;height: 550rpx;box-sizing: border-box;}
</style>
